<!--
 * @Author: 471826078@qq.com
 * @name: 
 * @Date: 2021-04-26 10:27:17
-->

<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding: 0 24px">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="报表名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <!-- <el-button class="commonBut saveBtn funComBut bzjAddJc" icon="icon iconfont icontianjia" @click="toAdd()">
                            <span class="opetareText">新增报表</span>
                        </el-button> -->
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px">
          <el-button
            class="commonBut saveBtn funComBut bzjAddJc"
            icon="icon iconfont icontianjia"
            @click="toAdd()"
          >
            <span class="opetareText">新增报表</span>
          </el-button>
        </div>
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
          stripe
          ref="tableBox1"
          highlight-current-row
          :max-height="tableHeight"
          @sort-change="sortChange"
          border
          @header-dragend="handleDragend"
        >
          <!-- <el-table-column label="报表名称" align="center" prop="name" >
                        <template slot-scope="scope">
                            <el-link type="primary" @click="toDetail(scope.row)">{{scope.row.name}}</el-link>
                        </template>
                    </el-table-column> -->
          <el-table-column label="报表名称" min-width="230">
            <template slot-scope="scope">
              <div @click="toDetail(scope.row)" class="fontColor">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.name"
                  :columnName="'name'"
                ></copyText>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="报表说明" align="center" prop="description" ></el-table-column> -->
          <el-table-column label="报表说明" min-width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.description"
                :columnName="'description'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            label="报表类型"
            align="center"
            prop="typeName"
            width="180px"
          ></el-table-column>
          <el-table-column
            label="最后修改人"
            align="left"
            prop="lastUpdaterName"
            min-width="230"
          ></el-table-column>
          <el-table-column
            label="最后修改时间"
            sortable="custom"
            align="center"
            prop="lastUpdateTime"
            width="200px"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            fixed="right"
            width="180px"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetail(scope.row)"
                >查看</el-link
              >
              <el-link type="primary" @click="toSetting(scope.row)"
                >设置</el-link
              >
              <el-link type="primary" @click="toDelete(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- 分页 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          style="height: 52px"
        ></Pagination>
      </div>
    </div>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'diyTable',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '自定义报表',
      filterField: {
        name: '',
      },
      tableList: [
        {
          id: '323123131',
          tableName: '无考勤记录项目',
          tabledescription: '查询无考勤记录的项目',
          tableType: '明细报表',
          author: '张德帅',
          updateDate: '2021-04-28 17:30:30',
        },
      ], //列表数据
      loading: false,
      isShow: false, //列表加载
      requestUrl: 'api-s/cs/projectstats/customreport/page',
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    toAdd() {
      this.$router.push('/home/statement/addDiyTable')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/statement/diyTable',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    toDetail(item) {
      this.$router.push({
        path: '/home/statement/diyTableDetail',
        query: { title: item.name, id: item.id },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/statement/diyTable',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toSetting(item) {
      this.$router.push({
        path: '/home/statement/addDiyTable',
        query: { title: item.name, id: item.id },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/statement/diyTable',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toDelete(item) {
      this.$confirm('确认删除该巡查数据吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.deleteSettings(item.id)
        })
        .catch(() => {
          this.$message.error('取消删除')
        })
    },
    deleteSettings(reportId) {
      this.axios
        .post('api-s/cs/projectstats/customreport/remove', { reportId })
        .then((res) => {
          if (!res.data.hasError) {
            this.$nextTick(function () {
              this.$refs.pagination.getTableListData()
            })
          } else {
            this.$message({
              message: '删除失败',
              type: 'failed',
              duration: 2000,
            })
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  top: 198px;
  .fontColor {
    color: #409eff;
    cursor: pointer;
  }
}
@import '../../../static/css/filterArea.less';
</style>
